<template>
    <div class="recommend">
        <div class="rule">
            <div class="number">总计邀请好友{{number}}人</div>
            <div class="rules">
                <p class="f24">推荐者：免费获得价值150元优惠券</p>
                <p class="f24">被推荐者：免费获得价值300元优惠券</p>
            </div>
        </div>
        <div class="btns">
            <router-link tag="span" to="/invite">点击生成分享海报</router-link>
            <!-- <span>点击右上角邀请好友</span> -->
        </div>
    </div>
</template>

<script>
    export default {
        name: 'recommend',
        data() {
            return {
                number: 0
            }
        },
        methods: {
            freindCount() {
                let params = {
                    userId: this.$store.state.userId
                }
                this.$http.fetchGet('freindCount', params).then(res => {
                    if(res.code == 200) {
                        this.number = res.data
                    }
                })
            }
        },
        mounted() {
            this.freindCount()
        }
    }
</script>

<style lang="less" scoped>
    .recommend{
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        .rule{
            position: relative;
            width: 100%;
            .h(806);
            background: url("../../assets/my/recommend.png");
            background-size: 100%;
            .number{
                width: 100%;
                .h(60);
                .lh(60);
                text-align: center;
                color: #F02A06;
                background: #FBDA30;
                position: absolute;
                top: 35%;
            }
            .rules{
                width: 100%;
                text-align: center;
                position: absolute;
                bottom: 20px;
                p{
                    text-align: center;
                    .lh(48);
                    color: #F02A06;
                }
            }
        }
        .btns{
            width: 100%;
            display: flex;
            span{
                flex: 1;
                .m(20);
                .mt(40);
                .h(88);
                .lh(88);
                border-radius: 5px;
                &:nth-child(1){
                    text-align: center;
                    border:1px solid #189BEB;
                    color: #189BEB;
                }
                &:nth-child(2){
                    text-align: center;
                    background: #189BEB;
                    color: #fff;
                    border: 1px solid #189BEB;
                }
            }
        }
    }
</style>
